<template>
  <div :class="{ 'web-container': deviceType == 'web', 'mobile-container': deviceType == 'mobile' , 'ipad-container': deviceType == 'ipad'}">
    <div class="siteTitle">安世代</div>
    <!-- 注册表单 -->
    <div class="content">
      <div class="register">
        <div class="registerBox">
          <div class="topTitle">注册</div>
          <el-form
            ref="registerForm"
            :model="registerForm"
            :rules="registerRules"
          >
            <el-form-item prop="userName">
              <el-input
                v-model="registerForm.userName"
                placeholder="请输入用户名称"
              ></el-input>
            </el-form-item>
            <el-form-item prop="account">
              <el-input
                v-model="registerForm.account"
                placeholder="请输入账号"
              ></el-input>
            </el-form-item>
            <el-form-item prop="password">
              <el-input
                v-model="registerForm.password"
                placeholder="请输入密码"
                show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item prop="confirmPassword">
              <el-input
                v-model="registerForm.confirmPassword"
                placeholder="确认密码"
                show-password
              >
              </el-input>
            </el-form-item>
            <el-form-item>
              <el-button class="submit" @click="onSubmit('registerForm')"
                >下一步</el-button
              >
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "Register",
  data() {
    return {
      // 绑定表单
      registerForm: {
        userName: "",
        account: "",
        password: "",
        confirmPassword: "",
      },
      // 规则表单
      registerRules: {
        userName: [
          { required: true, message: "请输入您的名称", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        account: [
          { required: true, message: "请输入您的账号", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        password: [
          { required: true, message: "请输入密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
        confirmPassword: [
          { required: true, message: "请确认密码", trigger: "blur" },
          { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" },
        ],
      },
    };
  },

  methods: {
    onSubmit(formName) {
      console.log(formName, "formName");
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.$router.push("login");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
      console.log("submit!", this.registerForm);
    },
  },
};
</script> 

<style lang="scss" scoped>
.web-container {
  width: 100vw;
  height: 100vh;
  background-color: #f5f5f7;

  .siteTitle {
    padding: 60px 0px 54px 80px;
    font-size: 50px;
    font-weight: 500;
    font-family: YujiBoku-Regular;
    color: #000000;
  }

  .content {
    display: flex;
    justify-content: center;
    align-items: center;

    .register {
      width: 1166px;
      padding: 60px 0px 60px 0px;
      background: #ffffff;
      border-radius: 20px 20px 20px 20px;
      display: flex;
      justify-content: center;
      align-items: center;

      .registerBox {
        width: 436px;

        .topTitle {
          width: 100%;
          text-align: center;
          font-size: 50px;
          margin-bottom: 37px;
        }

        .submit {
          margin-top: 40px;
          width: 100%;
          height: 50px;
          background-color: #870c08;
          color: #ffffff;
          border-radius: 50px;
        }
      }
    }
  }
}
</style>